<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p4_元素显示模式</title>
  <style>
    div {
      width: 200px;
      height: 100px;
      border: 5px solid #f00;
      /* 块级元素 允许设置宽高 竖着排*/
      display: block;
    }
    span {
      background-color: #FFFF00;
      display: block;
      /* 行内元素 不允许设置宽高 横着排*/
      display: inline;
      width: 200px;
      height: 200px;
    }
    input,button {
        width: 200px;
        height: 200px;
        display: inline-block; /* 行内块 既可以设置宽高 又可以横着排*/
    }
    .d2 {
        display: none; /* 让元素消失的一种方式 并且不占据页面的布局空间*/
    }
  </style>
</head>
<body>
    <div class="d1">111</div>
    <div class="d2">222</div>
    <div class="d3">333</div>
    <hr>
    <span>123456789</span>
    <span>123456789</span>
    <span>123456789</span>
    <hr>
    <input type="text">
    <input type="text">
    <input type="text">
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</body>
</html>